<template>
    <Breadcrumb :datas="[`管理系统`, `轮播管理`]">
        <el-button plain type="primary" @click="adddrawer.show = true"
            ><el-icon><Plus /></el-icon>新增轮播</el-button
        >
    </Breadcrumb>
    <el-table :data="banners" style="width: 100%" empty-text="没有数据">
        <el-table-column label="标题" prop="title" />
        <el-table-column label="图片">
            <template #default="scope">
                <el-image
                    style="width: 120px"
                    :src="scope.row.imageUrl"
                    fit="cover"
                ></el-image>
            </template>
        </el-table-column>
        <el-table-column label="链接">
            <template #default="scope">
                <el-tag type="primary">{{ scope.row.targetUrl }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建日期" prop="createdAt" />
        <el-table-column label="排序" prop="order" />
        <el-table-column label="状态">
            <template #default="scope">
                <el-tag v-if="scope.row.isActive" type="success">已启用</el-tag>
                <el-tag type="danger" v-else>已禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="right" width="320">
            <template #header>
                <el-input
                    v-model.trim="params.keywords"
                    placeholder="请输入搜索关键词"
                    @keyup.enter="getBanners"
                    clearable
                    @clear="getBanners"
                    size="large"
                >
                    <template #append>
                        <el-button
                            @click="getBanners"
                            size="large"
                            plain
                            type="primary"
                            >搜索</el-button
                        >
                    </template>
                </el-input>
            </template>
            <template #default="scope">
                <el-switch
                    size="large"
                    style="margin-right: 10px"
                    v-model="scope.row.isActive"
                    inline-prompt
                    :active-value="false"
                    :inactive-value="true"
                    active-text="启用"
                    inactive-text="禁用"
                    @change="updateStatus(scope.row)"
                ></el-switch>
                <el-button type="warning" @click="showUpdate(scope.row)" plain
                    >修改</el-button
                >
                <DeleteConfirm :confirm="() => deleteEvent(scope.row._id)" />
            </template>
        </el-table-column>
    </el-table>
    <Teleport to="body">
        <!-- 新增轮播 -->
        <AddDrawer :show="adddrawer.show" title="新增轮播" :close="closeDrawer">
            <template #body>
                <el-form-item label="标题" size="large">
                    <el-input
                        type="text"
                        placeholder="请输入标题"
                        size="large"
                        v-model.trim="adddrawer.data.title"
                        :prefix-icon="Message"
                    />
                </el-form-item>
                <el-form-item label="链接地址" size="large">
                    <el-input
                        type="text"
                        placeholder="请输入链接地址"
                        size="large"
                        v-model.trim="adddrawer.data.targetUrl"
                        :prefix-icon="Link"
                    />
                </el-form-item>
                <el-form-item label="轮播图片" size="large">
                    <Uploader ref="addLoaderRef" />
                </el-form-item>
            </template>
            <template #footer>
                <el-button size="large" @click="closeDrawer">取消</el-button>
                <el-button size="large" type="primary" @click="addBanner"
                    >提交</el-button
                >
            </template>
        </AddDrawer>
        <!-- 轮播修改 -->
        <el-dialog
            v-model="updatepop.show"
            align-center
            width="500"
            class="update-dialog"
            title="轮播修改"
        >
            <el-form label-width="80px" label-position="top">
                <el-form-item label="标题" size="large">
                    <el-input
                        type="text"
                        placeholder="请输入标题"
                        v-model.trim="updatepop.data.title"
                        size="large"
                    />
                </el-form-item>
                <el-form-item label="跳转链接" size="large">
                    <el-input
                        type="text"
                        placeholder="请输入跳转链接"
                        v-model.trim="updatepop.data.targetUrl"
                        size="large"
                    />
                </el-form-item>
                <el-form-item label="排序" size="large">
                    <el-input
                        type="number"
                        placeholder="请输入排序"
                        v-model.trim="updatepop.data.order"
                        size="large"
                    />
                </el-form-item>
                <el-form-item label="轮播图" size="large">
                    <Uploader ref="editLoaderRef" />
                </el-form-item>
                <el-form-item>
                    <el-button size="large" @click="updatepop.show = false"
                        >取消</el-button
                    >
                    <el-button size="large" @click="updateBanner" type="primary"
                        >确定</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </Teleport>
</template>

<script setup>
import { Message, Link, Plus } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, nextTick } from "vue";
import Breadcrumb from "@/components/breadcrumb";
import {
    BannerList,
    BannerAdd,
    BannerDelete,
    BannerUpdate
} from "@/api/banners";
import AddDrawer from "@/components/drawer";
import DeleteConfirm from "@/components/confirm";
import Uploader from "@/components/uploader";
import { ElMessage } from "element-plus";

const addLoaderRef = ref(null);
const editLoaderRef = ref(null);
const adddrawer = reactive({
    show: false,
    data: {}
});

const updatepop = reactive({
    show: false,
    data: {}
});

const banners = ref([]);
const params = reactive({
    keywords: ""
});
// 关闭抽屉
const closeDrawer = () => {
    adddrawer.show = false;
};

// 确定删除
const deleteEvent = async (id) => {
    const res = await BannerDelete(id);
    if (res) {
        ElMessage.success("删除成功");
        banners.value = banners.value.filter((item) => item._id !== id);
    }
};

// 获取列表
const getBanners = async () => {
    const res = await BannerList(params);
    if (res) {
        banners.value = res;
    }
};

// 添加轮播
const addBanner = async () => {
    if (!adddrawer.data.title) {
        return ElMessage.error("请输入标题");
    }
    if (!adddrawer.data.targetUrl) {
        return ElMessage.error("请填写跳转链接");
    }
    if (!addLoaderRef.value.getUrl()) {
        return ElMessage.error("请上传轮播图片");
    }
    const res = await BannerAdd({
        title: adddrawer.data.title,
        targetUrl: adddrawer.data.targetUrl,
        imageUrl: addLoaderRef.value.getUrl()
    });
    if (res) {
        banners.value.unshift(res);
        ElMessage.success("添加成功");
        adddrawer.data = {};
        adddrawer.show = false;
    }
};

// 修改轮播状态
const updateStatus = async ({ _id, isActive }) => {
    const status = isActive ? true : false;
    const res = await BannerUpdate(_id, { isActive: status });
    if (res) {
        ElMessage.success("用户状态修改成功");
        banners.value.map((item) => {
            if (item._id == _id) {
                item.isActive = status;
            }
        });
    }
};

// 修改用户
const showUpdate = (banner) => {
    console.log(banner);
    updatepop.show = true;
    updatepop.data = banner;
    nextTick(() => {
        editLoaderRef.value.setUrl(banner.imageUrl);
    });
};

// 更新轮播
const updateBanner = async () => {
    if (!updatepop.data.title) {
        return ElMessage.error("请填写标题");
    }
    if (!updatepop.data.targetUrl) {
        return ElMessage.error("跳转链接不能为空");
    }
    if (!/\d+/.test(updatepop.data.order)) {
        return ElMessage.error("请填写正确的排序");
    }
    if (!editLoaderRef.value.getUrl()) {
        return ElMessage.error("请上传图片");
    }
    const res = await BannerUpdate(updatepop.data._id, {
        title: updatepop.data.title,
        targetUrl: updatepop.data.targetUrl,
        order: updatepop.data.order,
        imageUrl: editLoaderRef.value.getUrl()
    });
    if (res) {
        ElMessage.success("修改成功");
        banners.value.map((item) => {
            if (item._id === updatepop.data._id) {
                item.title = updatepop.data.title;
                item.targetUrl = updatepop.data.targetUrl;
                item.order = updatepop.data.order;
                item.imageUrl = editLoaderRef.value.getUrl();
            }
        });
        updatepop.show = false;
        updatepop.data = {};
    }
};

onMounted(async () => {
    getBanners();
});
</script>

<style lang="scss" scoped>
.add-drawer {
    h1 {
        font-weight: bold;
        align-items: center;
    }
    .avatar,
    .upload {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 4px;
        position: relative;
        img {
            width: 100%;
        }
        .hover {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            display: flex;
            color: #ff0000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            .icon {
                cursor: pointer;
            }
        }
        &:hover .hover {
            opacity: 1;
        }
    }
    .upload {
        cursor: pointer;
    }
}
</style>
